<template>
  <div class="search-bar" :class="{ 'extended': extended }">
    <div class="input-group">
      <span class="input-group-text bg-white border-end-0">
        <i class="fas fa-search text-muted"></i>
      </span>
      
      <input
        type="text"
        class="form-control border-start-0"
        :placeholder="placeholder"
        v-model="searchQuery"
        @input="handleInput"
        @keyup.enter="performSearch"
      >
      
      <button class="btn btn-primary" type="button" @click="performSearch">
        <i class="fas fa-search"></i>
        <span v-if="extended" class="ms-2">搜索</span>
      </button>
    </div>
    
    <!-- 扩展搜索选项 -->
    <div v-if="extended" class="search-options mt-3">
      <div class="row g-2">
        <div class="col-md-3">
          <select class="form-select" v-model="searchType">
            <option value="city">城市</option>
            <option value="attraction">景点</option>
            <option value="food">美食</option>
            <option value="hotel">住宿</option>
          </select>
        </div>
        <div class="col-md-3">
          <select class="form-select" v-model="region">
            <option value="">所有地区</option>
            <option value="asia">亚洲</option>
            <option value="europe">欧洲</option>
            <option value="america">美洲</option>
          </select>
        </div>
        <div class="col-md-3">
          <select class="form-select" v-model="category">
            <option value="">所有分类</option>
            <option value="culture">文化</option>
            <option value="nature">自然</option>
            <option value="food">美食</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  props: {
    extended: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '搜索城市、景点、美食...'
    }
  },
  data() {
    return {
      searchQuery: '',
      searchType: 'city',
      region: '',
      category: ''
    }
  },
  methods: {
    handleInput() {
      this.$emit('search-input', this.searchQuery)
    },
    performSearch() {
      const searchParams = {
        query: this.searchQuery,
        type: this.searchType,
        region: this.region,
        category: this.category
      }
      this.$emit('search', searchParams)
      
      // 如果搜索条件有效，跳转到搜索结果页
      if (this.searchQuery.trim()) {
        this.$router.push({
          path: '/search',
          query: searchParams
        })
      }
    }
  }
}
</script>

<style scoped>
.search-bar.extended {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.search-bar .form-control:focus {
  box-shadow: none;
  border-color: #007bff;
}
</style>